
<style lang="less" scoped>

</style>

<template>
  <el-from class="changePass" :modle="passForm" :rules="rules" ref="changePass" status-icon>
    <el-form-item label="旧密码" prop="oldp">
      <el-input required v-model="passForm.oldp" placeholder="请输入旧密码" type="password" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="新密码" prop="newp">
      <el-input required v-model="passForm.newp" type="password" placeholder="请输入新密码" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="确认新密码" prop="confirmp">
      <el-input required v-model="passForm.confirmp" type="password" placeholder="请再次输入新密码" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button @click="resetFrom">重置</el-button>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-from>
</template>

<script>
  export default {
    data () {
      let oldpass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入旧密码'))
        } else {
          if (this.passForm.oldpass !== '') {
            this.$refs.passForm.validateField('oldp')
          }
          callback()
        }
      }
      let newpass = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入新密码'))
        }
        setTimeout(() => {
          if (this.passForm.newp.length < 6 || this.passForm.newp.length > 16) {
            callback(new Error('密码必须在6~16个字符之间'))
          } else {
            callback()
          }
        }, 1000)
      }
      let confirmpass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入新密码'))
        } else if (value !== this.passForm.newp) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      return {
        passForm: {
          oldp: '',
          newp: '',
          confirmp: ''
        },
        rules: {
          oldp: [
            {validator: oldpass, trigger: 'blur'}
          ],
          newp: [
            {validator: newpass, trigger: 'blur'}
          ],
          confirmp: [
            {validator: confirmpass, trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      resetFrom () {
        this.$refs.passForm.resetFields()
      },
      submitForm () {
        console.log('111')
      }
    }
  }
</script>
